<template>
  <div class="home">
    <!-- <el-tree ref="tree" :data="treeNode" node-key="id" show-checkbox :default-expanded-keys="defaultExpandedKeys"
      :props="defaultProps" @node-click="getCheckedKeysd">
    </el-tree> -->
    <h2>单选树形结构</h2>
    <el-tree class="tree-tap" :data="treeNode" default-expand-all highlight-current :check-strictly="true" node-key="id"
      ref="treeForm" :check-on-click-node="true" :props="defaultProps" @check="changeTree"
      @check-change="handleNodeClick">

      <span slot-scope="{ node, data }" class="span__">
        <!-- {{ node.isLeaf }} -->
        <span class="svg-icons">

          <span class="svg" v-if="node.isLeaf">
            <span v-if="node.checked">
              <svg t="1668690373983" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2796" width="200" height="200">
                <path
                  d="M512 95.8976A416.1024 416.1024 0 1 0 928.1024 512 416.0512 416.0512 0 0 0 512 95.8976z m0 608.256A192.1536 192.1536 0 1 1 704.1536 512 192.1536 192.1536 0 0 1 512 704.1536z"
                  fill="#5cb6ff" p-id="2797"></path>
              </svg>
            </span>
            <span v-else>
              <svg t="1668690472338" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2995" width="200" height="200">
                <path
                  d="M140.8 512A371.2 371.2 0 1 0 512 140.8 371.2 371.2 0 0 0 140.8 512zM76.8 512a435.2 435.2 0 1 1 435.2 435.2A435.2 435.2 0 0 1 76.8 512z"
                  fill="#dee1e8" p-id="2996"></path>
              </svg>
            </span>

          </span>

          <span class="tree-node-span">{{ node.label }}</span>

        </span>
      </span>


    </el-tree>





  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import TreeSelect from '@/base-ui/tree-select/TreeSelect.vue'
import MyMap from "@/base-ui/map/myMap.vue"
import SearchMap from "@/base-ui/map/search-map.vue"

/**
 * 描述
 * @date 2022-10-23
 * @param {Array} testData 要构造的数组
 * @returns {Array} 构造好的属性结构数组
 */
function foo(testData) {
  // 构造父级格式
  let treeNode = []
  Object.keys(testData).forEach((item) => {
    treeNode.push({ label: item })
  })
  // 构造节点
  for (const key in testData) {
    if (Object.hasOwnProperty.call(testData, key)) {
      const element = testData[key]
      element.label = element.kpi_name
      // 记录当前节点位于testData 的位置
      let i = 0
      let item = treeNode.find((item, index) => {
        i = index
        return item.label === key
      })
      item.children = item.children || []
      let res = tools(element)
      for (const key in res) {
        const element = res[key]
        item.children.push(element)
      }
      if (!item.children.length) delete treeNode.splice(i, 1)

    }
  }
  // 递归遍历添加id属性
  treeNode = insertAttr(treeNode)
  console.log(treeNode);
  return treeNode
}
/**
 * 描述
 * @date 2022-10-23
 * @param {Array} 二级节点数组
 * @returns {Object} 返回构造好的二级和三级节点信息
 */
function tools(arr) {
  let obj = {}
  // 构造二级和三级节点
  arr.forEach((el) => {
    let temp = obj[el.category]
    el.label = el.kpi_name
    if (!temp) {
      obj[el.category] = { label: el.category, children: [] }
      temp = obj[el.category]
    }
    temp.children.push(el)
    if (!temp.children.length) delete item.children
  })

  return obj
}
/**
 * @desc 为树形结构添加一个属性
 * @param {Array} treeData 构造好的属性结构数组
 */
function insertAttr(treeData = []) {
  // 由于没有id 所以必须添加一个虚拟id
  let id = 1
  function foo(treeData) {
    let backups = JSON.parse(JSON.stringify(treeData))
    return backups.map((item) => {
      const hasChildren = item.children && item.children.length
      return {
        ...item,
        id: id++,
        children: hasChildren ? foo(item.children, id) : [],
      }
    })
  }
  return foo(treeData)

}
/**
 * @desc 通过 name找到 节点信息
 * @param {Array} arr
 * @param {Array} treeData
 */
function findNodeByName(arr, treeData) {
  let res = []
  function foo(arr = [], treeData = []) {
    treeData.forEach(item => {
      if (arr.includes(item.label)) {
        res.push(item)
      }
      const { children } = item
      if (children && children.length) {
        foo(arr, children)
      }

    })
  }
  foo(arr, treeData)
  // console.log(res);
  return res
}
/**
 * @desc  展开当前节点的所有父节点信息
 * @param {Node} node
 */
function setParentNodeExpended(node) {

  node.expanded = true
  if (node.parent) {
    setParentNodeExpended(node.parent)
  }

}

export default {
  name: "HomeView",
  components: { TreeSelect, HelloWorld, MyMap, SearchMap },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      testData: {
        首页: [
          {
            kpi_name: "首页-category2-1",
            content: "0001",
            category: "category2",
          },
          {
            kpi_name: "首页-category1-1",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "首页-category1-2",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "首页-category3-1",
            content: "0001",
            category: "category3",
          },
        ],
        系統管理: [
          {
            kpi_name: "系統管理-category2-1",
            content: "0001",
            category: "category2",
          },
          {
            kpi_name: "系統管理-category8-1",
            content: "0001",
            category: "category8",
          },
          {
            kpi_name: "系統管理-category1-1",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "系統管理-category3-1",
            content: "0001",
            category: "category3",
          },
          {
            kpi_name: "系統管理-category3-1",
            content: "0001",
            category: "category3",
          },
          {
            kpi_name: "系統管理-category3-1",
            content: "0001",
            category: "category3",
          },
        ],
        项目配置: [
          {
            kpi_name: "项目配置-category2-1",
            content: "0001",
            category: "category2",
          },
          {
            kpi_name: "项目配置-category1-1",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "项目配置-category1-2",
            content: "0001",
            category: "category1",
          },
          {
            kpi_name: "项目配置-category3-1",
            content: "0001",
            category: "category3",
          },
        ],
        其他: []
      },
      treeNode: [],
      // 默认展开节点数据
      defaultExpandedKeys: [],
      msg: "home",

    };
  },
  created() {
    this.getFoo();
  },

  methods: {
    // 设置数据s
    getFoo() {
      this.treeNode = foo(this.testData);

    },
    // 单选树形结构
    handleNodeClick(data, checked, node) {
      if (checked) {
        this.$refs.treeForm.setCheckedKeys([data.id])
      }

    },
    // 单选树形结构
    changeTree(data, lst) {
      console.log(lst);
      if (lst.checkedKeys.length == 0) {
        //这里的treeForm是你el-tree命名的ref的值
        this.$refs.treeForm.setCheckedKeys([data.id])
      }

    },

  },

}
</script>
<style lang="less" scoped >
.map {
  margin: 0 auto;
  width: 500px;
  height: 500px;
}

/deep/ .el-checkbox__inner {
  border-radius: 50%;
}

svg {
  width: 18px;
  height: 18px;
}

.svg {


  span {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.svg-icons {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
